<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)

onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      color: ['#5b8ff9'],
      grid: {
        top: 15,
        left: 40,
        bottom: 25,
        right: 20,
      },
      xAxis: {
        type: 'category',
        data: ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8', '2023-9', '2023-10'],
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.65)',
          interval: 0,
          rotate: 0,//倾斜度 -90 至 90 默认为0
          margin: 10
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        }
      },
      series: [
        {
          data: [120, 193, 91, 134, 156, 130, 120, 76, 123, 67],
          type: 'line',
          smooth: true,
          label: {
            show: true,
            position: 'top',
          },
          areaStyle: {
            normal: {
              color: "rgba(33, 103, 250,.2)"
            }
          }
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
